<template>
    <div> 
        <div class="flex-box bg-c-wh" v-for="(item, index) in dataList" :key="index">
            <div class="flex-box month">
                <span>{{ item.month }}</span>
            </div>
            <div class="circle" :class="{'bg-c-o': item.month }"></div>
            <div class="flex-f1 data-details bor-b-g" @click="next(item.oid)">
                <div class="flex-box mar-tb">
                    <div class="tx-c-222">{{ item.type }}</div>
                </div>
                <div class="flex-box flex-pj mar-tb pad-t-5">
                    <div class="tx-c-666">{{ item.createTime }}</div>
                    <div :class="{
                        'tx-c-r' : item.change_status == 1,
                        'tx-c-g' : item.change_status == 2
                    }">{{ item.flowMoney }}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
export default {
    data () {
        return {
        }
    },
    methods: {
        next (id) {
            this.$router.push({
                path: "/myRecordDtails",
                query: {
                    id: id
                }
            })
        }
    },
    props: {
        dataList: Array
    }
}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
@import "~common/stylus/variable"
    .month
        width: 20%
        justify-content: center
        align-items: center
        font-size: $fonts-10
        color: $color-6
        border-right: 1px solid #ffdabe
    .circle
        height: .5rem
        width: .5rem
        border-radius: 100% 100%
        position: relative
        top: 1.5rem
        left: -.25rem
    .data-details
        margin: 0 5%
        font-size: $fonts-12
    .mar-tb
        margin: .5rem 0
</style>